<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/grid.locale-en.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/demo/demo.js"></script>

</head>
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>
        <table id="list"></table>
        <span style="background-color: rgb(204, 204, 204);">  <div id="pager"></div></span><hr>

        <div id="hello" >
            <input type="button" value="显示/关闭" @click="show(seen)"/>
            <div v-if="seen" >
                <p>id:{{id}}</p>
                <p>姓名:{{name}}</p>
                <p>手机号:{{mobail}}</p>
                <p>日期:{{date}}</p>
                <p>信息:{{getMessage()}}</p>
            </div>
        </div><hr>

        <div id="hello1" >
            <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
            <div v-bind:class="{'class1':class1}">
                变色字段
            </div>
            <!--v-bind，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定-->
            <a :href="url">到test页面</a><br>
            <a>{{input}}</a><br>
            <input v-model="input">
        </div><hr>

        <div id="hello3" >
            <div >条件语句</div>
            <input type="button" value="if的开关" @click="ifSwitch(OK)"/><br>
            <p v-if="OK">
                OK:{{OK}}
            </p>
            <p v-else>
                OK:{{OK}}
            </p>


            <input type="button" value="v-show的开关" @click="ifSwitch(OK)"/><br>
            <p v-show="OK">
                v-show也可以达到v-if相似的效果:<br>
                v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。<br>

                相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。<br>

                一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。<br>
            </p>

        </div>

        <div id="hello4">
            <a>循环语句</a>
            <table border="1">
                <caption>循环语句测试</caption>
                <tr>
                    <input type="hidden" value="id">
                    <th>姓名</th>
                    <th>手机</th>
                    <th>日期</th>
                </tr>
                <tr v-for="itm in map">
                    <input type="hidden" v-model="itm.id">
                    <td v-html="itm.name"></td>
                    <td v-html="itm.mobile"></td>
                    <td v-html="itm.date"></td>
                </tr>
            </table>
        </div><hr>

        <div id="hello5">
            <a>事件处理</a>
            <input type="button" value="防重复提交" @click.once="count +=1;okSwitch(OK)">
            <a v-if="OK">
                按钮被点击了{{count}}次
            </a>

        </div><hr>
</body>
</html>